// 服务端
const Koa = require('koa')
const router = require('koa-router')()

const koa = new Koa()
koa.use(router.routes())

const Vue = require('Vue')
// 创建一个renderer实例，它可以帮我们把vue的语法编译成html
const  renderer = require('vue-server-renderer').createRenderer({
  template: require('fs').readFileSync('./index.template.html',)
})

const app = new Vue({
    template: `<div>{{msg}}</div>`,
    data() {
        return {
            msg: '这是已经被renderer编译之后的页面'
        }
    }
})
router.get('/', (ctx) => {
    // 调用rederer将Vue实例渲染成字符串
    // 第一个参数是vue的实例，第二个参数是回调函数，会在渲染字符串完成之后执行
    renderer.renderToString(app, (err, html) => {
        console.log(html);
        ctx.body = `
        <!DOCTYPE html>
          <html lang="">
            <head>
              <title>Vue SSR</title>
            </head>
            <body>
              ${html}
            </body>
          </html>`
    })

})

koa.listen(3000, () => {
  console.log('server is listening in 3000');
})
